(function ()
{
    var ball = document.getElementById("ball");
    var box = document.getElementById("box");
    var xDirection = 1;
    var yDirection = 1;
    var xPosition = 50;
    var yPosition = 50;

    setInterval(function ()
    {
        ball.style.left = xPosition + "px";
        ball.style.top = yPosition + "px";

        yPosition += yDirection;
        xPosition += xDirection;

        if (xPosition === box.offsetWidth - 5)
        {
            xDirection *= -1;
        }

        if (yPosition === box.offsetHeight - 5)
        {
            yDirection *= -1;
        }

        if (xPosition === 8)
        {
            xDirection *= -1;
        }

        if (yPosition === 8)
        {
            yDirection *= -1;
        }
    }, 8);
}());